<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.container{
			width: 1000px;
			margin: auto;
		}
		ul li{border-bottom: 1px solid #ccc;list-style: none;}
		ul li span{
			display: inline-block;
			width: 33.333333%;
			line-height: 50px;
		}
		ul .l1{
			font-weight: 800;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
		}
		.banner{
			background: #e9ecef;
			padding: 80px 0;
			text-align: center;
		}
		.banner h1{
			font-size: 50px;
			font-weight: 500;
		}
		.banner p{
			font-size: 18px;
			font-weight: 300;
			line-height: 30px;
		}
		input,select,button{
			width: 24%;
			border-radius: 5px;
			border: 1px solid #ced4da;
			height: 35px;
			padding: 0 1%;
			margin-right: 1%;
		}
		h2{
			font-size: 30px;
			font-weight: 500;
			margin-top: 50px;
		}
		button{
			background: #007bff;
			color: #fff;
			margin: 0;
			float: right;
		}
	</style>
</head>
<body>
	<div class="banner">
		<h1>学院信息表</h1>
		<p>1804</p>
	</div>
	<div class="container">
		<h2>添加</h2><br>
		<input type="text" placeholder='姓名' id="ipt1">
		<select id="ipt2">
		  <option value ="男">男</option>
		  <option value ="女">女</option>
		</select>
		<input type="number" placeholder='年龄' id="ipt3" >
		<button>添加</button>
		<h2>列表</h2><br>
		<ul>
		</ul>

	</div>



	<script>
	var hqsj = function(){
		  var xmlhttp;
	      if (window.XMLHttpRequest){
	        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
	        xmlhttp=new XMLHttpRequest();
	      }
	      else{
	        // IE6, IE5 浏览器执行代码
	        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	      }
	      xmlhttp.onreadystatechange=function(){
	        if (xmlhttp.readyState==4 && xmlhttp.status==200)
	        {     
	          json = JSON.parse(xmlhttp.responseText);
	          // 开始自己写
	          console.log(json)
	          document.querySelector('ul').innerHTML='<li class="l1"><span>姓名</span><span>性别</span><span>年龄</span></li>';
	          for(let i = 0;i<json.data.length;i++){
	          	document.querySelector('ul').innerHTML+='<li><span>'+json.data[i].studentName+'</span><span>'+json.data[i].sex+'</span><span>'+json.data[i].age+'</span></li>';
	          }
	          // 结束自己写
	        }
	      }
	      xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/student",true);
	      // 盘好路径
	      xmlhttp.send();
	}
     hqsj()

      document.querySelector('button').onclick=function(){
      	if (ipt1.value!=''&&ipt2.value!=''&&ipt3.value!='') {
      		  var xmlhttp;
		      if (window.XMLHttpRequest){
		        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		        xmlhttp=new XMLHttpRequest();
		      }
		      else{
		        // IE6, IE5 浏览器执行代码
		        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      xmlhttp.onreadystatechange=function(){
		        if (xmlhttp.readyState==4 && xmlhttp.status==200)
		        {
		        }
		      }
		      xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName="+ipt1.value+"&sex="+ipt2.value+"&age="+ipt3.value,true);
		      // 盘好路径
		      xmlhttp.send();
	      	  ipt1.value='';
      	}else{
      		alert('请输入全部信息')
      	}
      	hqsj();
      }
    </script>
</body>
</html>